var MyFun = {
    drawPie: function (data) {
        var el = MyFun.getElem('echart1');
        var mychart1 = echarts.init(el);
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            series: [
                {
                    name: '综合指数：',
                    type: 'pie',
                    radius: '50%',
                    center: ['50%', '38%'],
                    data: data,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        mychart1.setOption(option);
    },
    getElem: function (id) {
        return document.getElementById(id);
    },
    drawLine: function (Ydata) {
        var e2 = MyFun.getElem('echart2');
        var mychart2 = echarts.init(e2);
        var labelData = [];
        for (var i = 0; i < Ydata.length; i += 5) {
            labelData.push({value: Ydata[i], xAxis: i, yAxis: Ydata[i] + 0.5});
        }
        var Xdata = [];
        for (var i = 0; i < 24; i++) {
            Xdata.push('2017-8-29 ' + i + ':00');
        }
        var option = {
            tooltip: {
                trigger: 'axis'
            },
            calculable: false,
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: Xdata
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}'   //°C'
                    }
                }
            ],
            series: [
                {
                    name: 'AQI',
                    type: 'line',
                    data: Ydata,
                    markPoint: {
                        data: labelData
                    }
                }
            ]
        };
        mychart2.setOption(option);
    },
    getDataColor: function (str, value) {
        var color = [];
        color.push(red, blue, green, pink, yellow, pink);

    },
    getAllData: function () {
        var shi_js = Shi.get(),
            _name = [],
            _aqi = [],
            _pm25 = [],
            _pm10 = [],
            _so2 = [],
            _no2 = [],
            _co = [],
            _o3 = [],
            i,
            length = shi_js.length || 0;

        for (i = 0; i < length; i++) {
            _name.push(shi_js[i].name);
            _aqi.push(shi_js[i].aqi);
            _pm25.push(shi_js[i].pm25);
            _pm10.push(shi_js[i].pm10);
            _so2.push(shi_js[i].so2);
            _no2.push(shi_js[i].no2);
            _co.push(shi_js[i].co);
            _o3.push(shi_js[i].o3);
        }
        return [_name, _aqi, _pm25, _pm10, _so2, _no2, _co, _o3];
    },
    setData1: function (data) {
        var _cId = [],
            _c_Id = [];
        MyFun.getElem('_data3').innerHTML = data[0];
        for (var i = 1; i < 7; i++) {
            _cId[i] = MyFun.getElem('_c' + i);
            _c_Id[i] = MyFun.getElem('_c_' + i);
            _cId[i].innerHTML = data[i];
            _c_Id[i].style.width = MyFun.setWidth(data[i], Min[i], Max[i]) + '%';
        }
    },
    getMinMax: function (alldata) {
        /*for(var c=1;c<alldata.length;c++){
            var _data=alldata[c];
            Min[c-1]=_data[0];
            Max[c-1]=_data[0];
            for(var i=1;i<_data.length;i++){
                if(_data[i]<Min[c-1]) Min[c-1]=_data[i];
                if(_data[i]>Max[c-1]) Max[c-1]=_data[i];
            }
        }*/
        //Min=[50,35,50,50,40,2,100];
        //Max=[500,500,500,1600,565,60,800];
        Min = [50, 35, 50, 10, 30, 1, 1];
        Max = [500, 500, 500, 800, 800, 90, 800];
    },
    setWidth: function (value, _min, _max) {
        parseFloat(value);
        var m_min = 100,
            m_max = 1000,
            a,
            b;
        a = (m_max - m_min) / ((_max - _min) * 1.0);
        b = m_max - a * _max;
        if (value <= _min) return m_min / m_max * 100;
        else if (value <= _max) return (a * value + b) / m_max * 100;
        else return 100;
    }
}
//////////////////////////////////////////////
//网址解析
var _allData = MyFun.getAllData();
/*var_name=["郑州","开封","洛阳","平顶山","安阳","鹤壁","新乡","焦作","濮阳","许昌","漯河","三门峡","商丘","周口","驻马店","南阳","信阳"];*/
var Min = [], Max = [];
MyFun.getMinMax(_allData);

function href() {
    var a = window.location.href.split('='),
        n = parseInt(a[1]),
        i = 0,
        _cityname,
        data0,
        data1;
    for (i = 0; i < 17; i++) {
        if (i === n) {
            _cityname = _allData[0][i];
            data0 = [_allData[1][i], _allData[2][i], _allData[3][i], _allData[4][i], _allData[5][i], _allData[6][i], _allData[7][i]];
            data1 = [
                {value: _allData[1][i], name: 'AQI'},
                {value: _allData[2][i], name: 'PM2.5'},
                {value: _allData[3][i], name: 'PM10'},
                {value: _allData[4][i], name: 'SO2'},
                {value: _allData[5][i], name: 'NO2'},
                {value: _allData[6][i], name: 'CO'},
                {value: _allData[7][i], name: 'O3'}
            ];
            return [_cityname, data1, data0];
        }
    }
}

//updata


MyFun.getElem('_cname').innerText = href()[0];//cityname
MyFun.drawPie(href()[1]); //cityPie
MyFun.setData1(href()[2]);
var ydata = [1, -2, 2, 5, 3, 2, 0, 12, 6, 5, 32, 52, 2, 2, 3, 9, 4, 1, 0.5, 5, 2, 9, 8, 7];
MyFun.drawLine(ydata);


$(document).ready(function () {
    for (var i = 0; i < 10; i++) {
        $('.tableData').append(
            '<tr>' +
            '<td>' + (i + 1) + '</td>' +
            '<td>' + _allData[0][i] + '</td>' +
            '<td>' + 0 + '</td>' +
            '<td>' + 0 + '</td>' +
            '<td>' + 0 + '</td>' +
            '<td>' + 0 + '</td>' +
            '<td>' + 0 + '</td>' +
            '</tr>'
        );
    }
});


MyFun.getElem("_back").onclick = function () {

    window.history.back();

}
MyFun.getElem("_home").onclick = function () {

    window.location = "Navigator.html"

}
 
 
 
